<template>
  <t-dialog
    :header="header"
    placement="center"
    :visible.sync="visible"
    @confirm="onSubmit"
    :onClose="closeDialog"
    :closeOnOverlayClick="false"
    width="60%"
  >
    <t-form
      labelAlign="right"
      labelWidth="350px"
      :data="formData"
      ref="form"
      @submit="onSubmit"
      :colon="true"
      :rules="rules"
    >
      <t-form-item label="一、交通运输科研仪器设备数量" name="jtyskyyq" labelAlign="left">
        <t-input-number v-model="formData.jtyskyyq" theme="column" placeholder="请输入交通运输科研仪器设备数量" style="width: 100%"></t-input-number>
      </t-form-item>
      <t-form-item label="其中：50 万元及以上的科研仪器设备" name="jtyskyyqwys">
        <t-input-number v-model="formData.jtyskyyqwys" theme="column" placeholder="请输入50万元及以上的科研仪器设备数量" style="width: 100%"></t-input-number>
      </t-form-item>
      <t-form-item label="当年新增科研仪器设备数量" name="jtyskyyqxz" labelAlign="left">
        <t-input-number v-model="formData.jtyskyyqxz" theme="column" placeholder="请输入当年新增科研仪器设备数量" style="width: 100%"></t-input-number>
      </t-form-item>
      <t-form-item label="其中：50 万元及以上的科研仪器设备" name="jtyskyyqxzwys">
        <t-input-number v-model="formData.jtyskyyqxzwys" theme="column" placeholder="请输入50 万元及以上的科研仪器设备数量" style="width: 100%"></t-input-number>
      </t-form-item>
      <t-form-item label="二、交通运输科研实验室和研发中心总数量" name="jtyskysyshyfzx" labelAlign="left">
        <t-input-number v-model="formData.jtyskysyshyfzx" theme="column" placeholder="请输入交通运输科研实验室和研发中心总数量" style="width: 100%"></t-input-number>
      </t-form-item>
      <t-form-item label="机构内设交通运输科研实验室总数" name="jgnsjtyskysys" labelAlign="left">
        <t-input-number v-model="formData.jgnsjtyskysys" theme="column" placeholder="请输入机构内设交通运输科研实验室总数" style="width: 100%"></t-input-number>
      </t-form-item>
      <t-form-item label="其中：国家重点（工程）实验室个数" name="jgnsjtyskysysgjzd">
        <t-input-number v-model="formData.jgnsjtyskysysgjzd" theme="column" placeholder="请输入国家重点（工程）实验室个数" style="width: 100%"></t-input-number>
      </t-form-item>
      <t-form-item label="其中：行业（重点）实验室个数" name="jgnsjtyskysyshyzd">
        <t-input-number v-model="formData.jgnsjtyskysyshyzd" theme="column" placeholder="请输入行业（重点）实验室个数" style="width: 100%"></t-input-number>
      </t-form-item>
      <t-form-item label="其中：省级重点（工程）实验室个数" name="jgnsjtyskysyssjzd">
        <t-input-number v-model="formData.jgnsjtyskysyssjzd" theme="column" placeholder="请输入省级重点（工程）实验室个数" style="width: 100%"></t-input-number>
      </t-form-item>
      <t-form-item label="机构内设交通运输工程技术研发中心总数" name="jgnsjtysgcjsyfzx" labelAlign="left">
        <t-input-number v-model="formData.jgnsjtysgcjsyfzx" theme="column" placeholder="请输入机构内设交通运输工程技术研发中心总数" style="width: 100%"></t-input-number>
      </t-form-item>
      <t-form-item label="其中：国家工程（技术）研究中心个数" name="jgnsjtysgcjsyfzxgjgc">
        <t-input-number v-model="formData.jgnsjtysgcjsyfzxgjgc" theme="column" placeholder="请输入国家工程（技术）研究中心个数" style="width: 100%"></t-input-number>
      </t-form-item>
      <t-form-item label="其中：行业研发中心个数" name="jgnsjtysgcjsyfzxhyyf">
        <t-input-number v-model="formData.jgnsjtysgcjsyfzxhyyf" theme="column" placeholder="请输入行业研发中心个数" style="width: 100%"></t-input-number>
      </t-form-item>
      <t-form-item label="其中：省级工程（技术）研究中心个数" name="jgnsjtysgcjsyfzxsjgc">
        <t-input-number v-model="formData.jgnsjtysgcjsyfzxsjgc" theme="column" placeholder="请输入省级工程（技术）研究中心个数" style="width: 100%"></t-input-number>
      </t-form-item>
      <t-tabs
        v-model="selectTab"
        theme="card"
        addable
        dragSort
        @add="onAddBaseCase"
        @remove="onRemoveBaseCase"
        style="margin-left: 30px; border: 1px solid var(--td-component-stroke)"
      >
        <t-tab-panel
          removable
          v-for="(base, index) in formData.researchConditionBase"
          :key="base.tmpId"
          :value="base.tmpId"
          :label="(base.name?base.name:'基地名称')"
          :destroyOnHide="true"
        >
          <t-space direction="vertical" size="24px" style="padding: 24px 24px 24px 0;width:100%">
            <t-form-item label="序号" :name="`researchConditionBase[${index}].sort`" :label-width="180">
              <t-input-number v-model="formData.researchConditionBase[index].sort"  placeholder="请输入序号" style="width: 160px" />
            </t-form-item>
            <t-form-item label="基地名称" :name="`researchConditionBase[${index}].name`" :label-width="180">
              <t-input v-model="formData.researchConditionBase[index].name" placeholder="请输入基地名称"></t-input>
            </t-form-item>
            <t-form-item label="认定时间" :name="`researchConditionBase[${index}].certificationDate`" :label-width="180">
              <t-date-picker v-model="formData.researchConditionBase[index].certificationDate" placeholder="请输入认定时间" />
              <!-- <t-input v-model="formData.researchConditionBase[index].certificationDate" placeholder="请输入认定时间"></t-input> -->
            </t-form-item>
            <t-form-item label="认定级别和类型" :name="`researchConditionBase[${index}].certificationType`" :label-width="180">
              <t-input v-model="formData.researchConditionBase[index].certificationType" placeholder="请输入认定级别和类型"></t-input>
            </t-form-item>
          </t-space>
        </t-tab-panel>
      </t-tabs>
      <t-form-item label="审批状态" name="approveStatus">
        <t-switch
          size="large"
          v-model="formData.approveStatus"
          :label="['提交', '暂存']"
          :customValue="['2', '1']"
        ></t-switch>
      </t-form-item>
    </t-form>
  </t-dialog>
</template>

<script>
export const tabKey = 'researchCondition'
export const tableColumns = [
  {
    colKey: 'jtyskyyq',
    title: '一、交通运输科研仪器设备数量',
    children: [
      { colKey: 'jtyskyyq', title: '总数量' },
      { colKey: 'jtyskyyqwys', title: '50 万元及以上的科研仪器设备' },
      {
        colKey: 'jtyskyyqxz',
        title: '当年新增科研仪器设备数量',
        children: [
          { colKey: 'jtyskyyqxz', title: '新增数量' },
          { colKey: 'jtyskyyqxzwys', title: '50 万元及以上的科研仪器设备' }
        ]
      },
    ]
  },
  {
    colKey: 'jtyskysyshyfzx',
    title: '二、交通运输科研实验室和研发中心总数量',
    children: [
      { colKey: 'jtyskysyshyfzx', title: '总数量' },
      {
        colKey: 'jgnsjtyskysys',
        title: '机构内设交通运输科研实验室总数',
        children: [
          { colKey: 'jgnsjtyskysys', title: '总数量' },
          { colKey: 'jgnsjtyskysysgjzd', title: '国家重点（工程）实验室个数' },
          { colKey: 'jgnsjtyskysyshyzd', title: '行业（重点）实验室个数' },
          { colKey: 'jgnsjtyskysyssjzd', title: '省级重点（工程）实验室个数' },
        ]
      },
      {
        colKey: 'jgnsjtysgcjsyfzx',
        title: '机构内设交通运输工程技术研发中心总数',
        children: [
          { colKey: 'jgnsjtysgcjsyfzx', title: '总数量' },
          { colKey: 'jgnsjtysgcjsyfzxgjgc', title: '国家工程（技术）研究中心个数' },
          { colKey: 'jgnsjtysgcjsyfzxhyyf', title: '行业研发中心个数' },
          { colKey: 'jgnsjtysgcjsyfzxsjgc', title: '省级工程（技术）研究中心个数' },
        ]
      },
    ]
  },
  { colKey: 'researchConditionBase', title: '研究基地情况' },
  { colKey: 'approveStatus', title: '审批状态', width: '120px', fixed: 'right' },
  { colKey: 'op', title: '操作', fixed: 'right' },
]
export default {
  name: 'TabResearchConditions',
  props: {
    infoId: {
      type: Number,
      required: true,
      default: -1,
    },
  },
  data() {
    return {
      // business data
      formData: {
        jtyskyyq: undefined,
        jtyskyyqwys: undefined,
        jtyskyyqxz: undefined,
        jtyskyyqxzwys: undefined,
        jtyskysyshyfzx: undefined,
        jgnsjtyskysys: undefined,
        jgnsjtyskysysgjzd: undefined,
        jgnsjtyskysyshyzd: undefined,
        jgnsjtyskysyssjzd: undefined,
        jgnsjtysgcjsyfzx: undefined,
        jgnsjtysgcjsyfzxgjgc: undefined,
        jgnsjtysgcjsyfzxhyyf: undefined,
        jgnsjtysgcjsyfzxsjgc: undefined,
        researchConditionBase: [],
        // name
        // certificationDate
        // certificationType
        // sort
        approveStatus: '1',
      },
      rules: {
        jtyskyyq: [{ required: true, message: '交通运输科研仪器设备数量不能为空', trigger: 'blur' }],
        jtyskyyqwys: [{ required: true, message: '50 万元及以上的科研仪器设备不能为空', trigger: 'blur' }],
        jtyskyyqxz: [{ required: true, message: '当年新增科研仪器设备数量不能为空', trigger: 'blur' }],
        jtyskyyqxzwys: [{ required: true, message: '50 万元及以上的科研仪器设备不能为空', trigger: 'blur' }],
        jtyskysyshyfzx: [{ required: true, message: '交通运输科研实验室和研发中心总数量不能为空', trigger: 'blur' }],
        jgnsjtyskysys: [{ required: true, message: '机构内设交通运输科研实验室总数不能为空', trigger: 'blur' }],
        jgnsjtyskysysgjzd: [{ required: true, message: '国家重点（工程）实验室个数不能为空', trigger: 'blur' }],
        jgnsjtyskysyshyzd: [{ required: true, message: '行业（重点）实验室个数不能为空', trigger: 'blur' }],
        jgnsjtyskysyssjzd: [{ required: true, message: '省级重点（工程）实验室个数不能为空', trigger: 'blur' }],
        jgnsjtysgcjsyfzx: [{ required: true, message: '机构内设交通运输工程技术研发中心总数不能为空', trigger: 'blur' }],
        jgnsjtysgcjsyfzxgjgc: [{ required: true, message: '国家工程（技术）研究中心个数不能为空', trigger: 'blur' }],
        jgnsjtysgcjsyfzxhyyf: [{ required: true, message: '行业研发中心个数不能为空', trigger: 'blur' }],
        jgnsjtysgcjsyfzxsjgc: [{ required: true, message: '省级工程（技术）研究中心个数不能为空', trigger: 'blur' }],
        sort: [{ required: true, message: '序号不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '基地名称不能为空', trigger: 'blur' }],
        certificationDate: [{ required: true, message: '认定时间不能为空' }],
        certificationType: [{ required: true, message: '认定级别和类型不能为空', trigger: 'blur' }],
      },
      selectTab: undefined,
      // base data
      visible: true,
      header: '',
      btnLoading: false
    };
  },
  created() {
    if (this.infoId === -1) {
      this.header = '添加信息记录';
    } else {
      this.header = '修改信息内容';
      this.getDetail();
    }
  },
  methods: {
    // 添加研究基地情况
    onAddBaseCase() {
      const tmpId = Math.random().toString(32).substring(2, 12)
      this.selectTab = tmpId
      this.formData.researchConditionBase.push({ tmpId })
      console.log('add list')
    },
    onRemoveBaseCase(item) {
      this.formData.researchConditionBase.splice(item.index, 1)
      console.log('remove item', item)
    },
    async onSubmit() {
      const res = await this.$refs.form.validate();
      if (res) {
        this.btnLoading = true
        try {
          if (this.infoId === -1) {
            const { code, msg } = await this.$api.kjtjdc.table[tabKey].add(this.formData);
            if (code === 200) {
              this.$message.success('添加信息成功');
            } else {
              this.$message.success(msg);
            }
          } else {
            const { code, msg } = await this.$api.kjtjdc.table[tabKey].edit(this.formData);
            if (code === 200) {
              this.$message.success('修改信息成功');
            } else {
              this.$message.success(msg);
            }
          }
          this.$emit('update:visible', false);
          this.$emit('reload');
        } catch (e) {
          this.$message.success(e);
        } finally {
          this.btnLoading = false
        }
      } else {
        this.$message('warning', '请完善信息');
        this.this.btnLoading = false
      }
    },
    async getDetail() {
      const { data } = await this.$api.kjtjdc.table[tabKey].getInfoById(this.infoId);
      data.name = Number(data.name);
      this.formData = data;
    },
    // base methods
    closeDialog() {
      this.$refs.form.reset();
      this.$emit('update:visible', false);
    },
  }
}
</script>

<style lang="less" scoped>

</style>
